<%-- 
    Document   : INDEX
    Created on : 14/07/2014, 04:34:57 PM
    Author     : Luis.Parada
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript">
            function upload() {
                //check whether client browser fully supports all File API
                var
                        oOutput = $("#output"),
                        oData = new FormData(document.forms.namedItem("myForm"));
                oOutput.hide().html("Uploading...").show(100);		
                if (window.File && window.FileReader && window.FileList && window.Blob) {
                    var file = $('#myFile')[0].files[0];
                    if (typeof file !== 'undefined') {
                        var fsize = file.size; //get file size                    
                        var ftype = file.type; // get file type
                        //allow file types 
                        switch (ftype) {
                            case 'image/png':
                            case 'image/jpeg':
                            case 'image/pjpeg':
                            case 'application/x-zip-compressed':
                            case 'application/pdf':
                            case 'application/msword':
                            case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
                            case 'application/vnd.ms-excel':
                            case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
                                //Allowed file size is less than 5 MB (1048576 = 1 mb) (5242880 = 5 mb)
                                if (fsize <= 1048576) {
                                    var oReq = new XMLHttpRequest();
                                    oReq.open("POST", "upload.jsp", true);
                                    oReq.onreadystatechange = function() {
                                        if (oReq.status == 200 && oReq.readyState == 4) {
                                            //alert(oReq.responseText);
                                            oOutput.html(oReq.responseText).hide().show(1000);
                                        }
                                    };
                                    oReq.send(oData);
                                } else {
                                    oOutput.html("<b>" + bytesToSize(fsize) + "</b> Too big file! <br />File is too big, it should be less than 1 MB.<br/>Consider to compress.").show(1000);
                                }
                                break;
                            default:
                                oOutput.html("<b>" + ftype + "</b> Unsupported file type!").show(1000);
                        }
                    } else {
                        oOutput.html("Please select a file first!").show(1000);
                    }
                } else {
                    //Error for older unsupported browsers that doesn't support HTML5 File API
                    oOutput.html("Please upgrade your browser, because your current browser lacks some new features we need!").show(1000);
                }
            }

            function bytesToSize(bytes) {
                if (bytes === 0)
                    return '0 Byte';
                var k = 1024;
                var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                var i = Math.floor(Math.log(bytes) / Math.log(k));
                return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
            }

            function printFileType() {
                var file = $('#myFile')[0].files[0];
                if (typeof file !== 'undefined') {
                    $("#fileTypeDiv").html(file.type).show(500);
                    $("#output").hide(500);
                } else {
                    $("#fileTypeDiv").hide(1000);
                    $("#output").html("Please select a file first!").show(1000);
                }
            }
        </script>
    </head>
    <body>
        <form action="upload.jsp" method="post" enctype="multipart/form-data" id="myForm" name="myForm">
            File :<input type="file" name="myFile" id="myFile" onchange="printFileType()" />
            <div id="fileTypeDiv" style="display:none;"></div>        
            <div>
                <input type="button" name="subir" id="subir" value="Upload File" onclick="upload();"/>
                <!--<input type="submit" name="submit" id="submit" value="submit"/>-->
            </div>
        </form>
        <div id="output"></div>
    </body>
</html>
